<template>
  <el-card
      class="container"
      :body-style="{
      padding: 0
    }"
  >
    <el-calendar
        class="calendar"
        v-model="currentDate"
    >
      <template #dateCell="{ data }">
        <p :class="[
            data.isSelected ? 'is-selected' : '',
            calendarItemBgClass(data.day)
          ]">
          {{
            data.day
                .split('-')
                .slice(2)
                .join('')
          }}
          <br />
          <span class="amount" v-if="getTadayAmount(data.day)">
            {{ getTadayAmount(data.day) }}
          </span>
        </p>
      </template>
    </el-calendar>


  </el-card>
</template>

<script setup>
import {ref, watch} from "vue";
import { getChartCalendar } from "@/api/chart";
import emitter from "@/utils/eventHub";
// 选中的日期
const currentDate = ref(new Date());
/**
 * 获取数据
 */
const calendarListData = ref([]);
const getCalendarListData = async () => {
  const { result } = await getChartCalendar();
  calendarListData.value = result;
};
getCalendarListData();
const dateAmountList = ref({})
/**
 * 返回指定日期收益数据，在日历中进行展示
 */

/**
 * 触发日期改变的事件
 */
watch(currentDate, (val) => {
  // emit方法发送一个事件，传递数据
  emitter.emit("calendarChange", val);
});

const getTadayAmount = (date) => {
  // console.log("getTadayAmount-date:",date)
  if (dateAmountList.value[date]) {
    return dateAmountList.value[date]
  }
  // 根据日期，获取当日数据
  const tadayData = calendarListData.value.find(
      (item) => item.date === date
  );
  // 判断当日数据是否存在
  if (!tadayData) {
    return 0;
  }
  // 获取当日收益
  const tadayAmount = tadayData.amount
  // 对数据进行缓存
  dateAmountList.value[date] = tadayAmount

  return tadayAmount
};

/**
 * 返回日历的背景
 * */
const calendarItemBgClass = (day) => {
  if (getTadayAmount(day) > 0) {
    return "profit";
  } else if (getTadayAmount(day) < 0) {
    return "loss";
  }
  return "";
};
</script>

<style lang="scss" scoped>
.container {
  .calendar {
    :deep(.el-calendar__body) {
      padding: 0 12px 12px;
      font-size: 14px;
    }
    :deep(.el-calendar-day) {
      height: 66px !important;
      padding: 0 !important;
      p,
      span {
        height: 100%;
        padding: 8px;
        display: block;
      }
      // 金额样式
      .amount {
        font-size: 12px;
      }
      // 正收益 绿色
      .profit {
        background-color: #f3fff3;
        span {
          color: #649840;
        }
      }
      // 负收益 红色
      .loss {
        background-color: #ffe7e7;
        span {
          color: #b65d59;
        }
      }

      .is-selected {
        background-color: #d6f2ff;
      }
    }
  }
}
</style>